<template>
  <!-- <router-link to=""> </router-link> -->

  <div>
    <div class="details-item">
      <div @click="cellClick">
        <lazy-component>
          <img v-for="img in imageList" v-lazy="img" />
          <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" /> -->
        </lazy-component>

        <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" /> -->
        <div style="display: flex; margin-top: 0.25rem">
          <i
            style="
              margin-right: 0.5rem;
              font-size: 16px;
              color: var(--cp-primary);
            "
            >￥3,214.80</i
          >
          <i class="price_line">￥5,354.80</i>
        </div>
        <div style="position: relative; display: flex">
          <i style="font-size: 12px">儿童黑色FF logo短靴</i>
          <i
            style="
              position: absolute;
              right: 0;
              background-color: red;
              color: #fff;
              font-size: 0.75rem;
              border-radius: 2px;
            "
            >new</i
          >
        </div>

        <div style="display: flex">
          <div class="discounts">
            <i>6折</i>
          </div>
          <div style="flex: 1"></div>
        </div>
      </div>

      <div class="xin" @click="collectClick"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 父传子
defineProps({
  // 是否显示折扣价
  isShowDiscounts: {
    type: Boolean,
    default: false,
  },
});

const imageList = ["https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"];

// 子传父
const emit = defineEmits(["collect", "cellclick"]);

// 收藏
const collectClick = () => {
  emit("collect", "111");
};

// 整个页面点击
const cellClick = () => {
  emit("cellclick", "888888");
};
</script>

<style lang="scss" scoped>
.details-item {
  position: relative;
  display: flex;
  width: 9.5rem;
  text-align: center;
  //容器内元素的排列方向(默认横向排列)
  flex-direction: column;
  margin: 1rem;

  .discounts {
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
    width: auto;
    // height: 20px;
    border: 0.0625rem solid var(--cp-primary);

    i {
      //   display: block;
      padding: 2px 6px;
      font-size: 9px;
      color: var(--cp-primary);
    }
  }

  .xin {
    // float: right;
    // 子级绝对定位，不会占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子
    // 父盒子需要加定位限制子盒子在父盒子内显示
    // 父盒子布局时，需要占有位置，因此父盒子是相对定位
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    //若想让父盒子里的某一个盒子靠右显示，其他盒子居左， 只需要在父盒子里面， 加入display: flex，在想要移动的盒子里面，加入margin-left: auto即可；
    // margin-left: auto;
    width: 16px;
    height: 16px;
    background: url("https://cdn-gdcws-imgs.gdcws.cn/demo/20240126/xin.png")
      no-repeat;
    background-size: 100% 100%;
  }
}
</style>
